<template>
   <div class="wrapper">
       <!-- :options="swiperOption" -->
  <swiper :options="swiperOption" v-if="showSwiper">
    <!-- slides -->

    <swiper-slide  v-for="(item,index) in swipeData" :key="index">
        <img class="swiper-img" :src='item.imgUrl'/>
    </swiper-slide>
  
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
   </div> 
</template>


<script>
export default {
   name:'HomeSwiper',
   data(){
       return{
       swiperOption:{
           pagination:'.swiper-pagination',
            loop : true,//可选选项，开启循环
            autoplay : 2000,//可选选项，自动滑动
       }
       }
   },
   props:{
       swipeData:Array
   },
//   计算属性，为防止出现时不时显示第一张
   computed:{
     showSwiper(){
         return !this.swipeData.lenght;
     }
   }
}
</script>


<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
{
    background-color :#fff;
}
// 防止网络差下方的控件抖动
.wrapper{
overflow hidden;
 width :100%;
 height  0;
 padding-bottom: 35.25%
 background-color  #ffffff

}
.swiper-img{

    width :100%
    
}

</style>